import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, IStates, UISyncData, View, ViewProp} from "../../../script/frame/apiModel/gui/React";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {FrameEvent} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";


export interface ButtonState {
    bEnter: boolean,
    bClick: boolean,
}

export class LightButton<Prop, State> extends React.Element<ViewProp, ButtonState> {
    declare props: IProps & ViewProp & Prop;

    bLight: boolean = false;

    constructor(props) {
        super(props);

        this.state = {
            visible: true,
            bEnter: false,
            bClick: false,
        }
    }


    // onMouseDown = (event: FrameEvent) => {
    //     // this.bEnter = false;
    //     this.props.onMouseDown(event);
    // }

    onMouseEnter = (event: FrameEvent) => {
        this.toBigger();
        this.setState({
            ... this.state,
            bEnter: true,
        })
    }
    onMouseLeave = (event: FrameEvent) => {
        this.toSmaller();
        this.setState({
            ... this.state,
            bEnter: false,
        })
    }

    componentWillMount = () => {
        // super.componentWillMount();
        if (this.state.bEnter) {

        }
        return true
    }

    toBigger() {
        if (this.props.style.mask && this.props.style.mask.length && this.props.style.mask.length > 0) {
        } else {
            const whiteMaskBlp: string = Configer.getResource(ResourceKey.whiteMaskBlp);
            this.bLight = true
            this.props.style = { ...this.props.style,  mask: whiteMaskBlp };
        }
    }

    toSmaller () {
        if (this.bLight) {
            this.props.style = { ...this.props.style,  mask: '' };
        }
    }

    render = () => {
        const text = this.props.text;
        if (this.props.style.hidden) {
            this.props.style.mask = '';
        }
        return <View key={`${GuiKeys.lightButton}`} style={this.props.style} onMouseEnter={this.onMouseEnter} onMouseDown={this.props.onMouseDown} onMouseLeave={this.onMouseLeave}>{text}</View>
    }
}